import React, { useCallback, useEffect, useState } from 'react';
import { Input, Select, Form, Row, Col, Button } from 'antd';
import { MinusCircleOutlined } from '@ant-design/icons';

import {
	FILTER_MEASURE_CONDITION,
	// FILTER_MEASURE_TYPE
} from 'src/pages/AnalyseManage/EditReport/components/EditorDataType/EnumConfig';
import 'src/pages/AnalyseManage/EditReport/index.module.scss';

const { Option } = Select;

interface IProps {
	field: any;
	conditions:any;
	setMeasure: Function;
}

const FilterFieldMeasure = ( props: IProps ) => {
	const { field, setMeasure } = props;
	// const [ way, setWay ] = useState( FILTER_MEASURE_TYPE[ 0 ].value );

	const getNewLine = () => {
		return {
			key: FILTER_MEASURE_CONDITION[ 0 ].value,
			value: ''
		};
	};

	const [ conditionLines, setConditionLines ] = useState( [ getNewLine() ] );

	const handleSelect = ( value, index ) => {
		const array = Array.from( conditionLines );
		array[ index ].key = value;
		setConditionLines( array );
	};

	/* const handleSelectWay = ( value ) => {
		setWay( value );
	}; */

	const handleAdd = ( index ) => {
		if ( index + 1 === conditionLines.length ) {
			setConditionLines( [ ...conditionLines, getNewLine() ] );
		}
	};

	const handleInput = ( event, index ) => {
		const array = Array.from( conditionLines );
		array[ index ].value = event.target.value;
		setConditionLines( array );
	};

	const deleteLine = ( index ) => {
		const array = Array.from( conditionLines );
		array.splice( index, 1 );
		setConditionLines( array );
	};

	const setConditions = useCallback( () => {
		const conditions = conditionLines.map( v => {
			return {
				field: field.name,
				symbol: v.key,
				values: v.value.trim() ? [ v.value.trim() ] : null,
			};
		} );
		// console.log( '=== setConditions ===', conditions );

		setMeasure( conditions );
	}, [ field, setMeasure, conditionLines ] );

	useEffect( () => {
		setConditions();
	}, [ setConditions ] );

	useEffect( () => {
		let condValues = props.conditions.map( item => {
			return { key: item.symbol, value: item.values[0] };
		} );
		// console.log( '---Measure ----', condValues );
		setConditionLines( [ ...condValues, getNewLine() ] );
	}, [ props.conditions ] );

	return (
		<Form className='filter_field_modal_date' labelCol={ { span: 6 } } labelAlign='left'>
			{/* <Form.Item label="数据聚合方式" name="dateType" colon={ false }>
				<Row gutter={ 8 }>
					<Col span={ 10 }>
						<Select defaultValue={ FILTER_MEASURE_TYPE[ 0 ].value } value={ way } onChange={ handleSelectWay }>
							{
								FILTER_MEASURE_TYPE.map( ( v, i ) => {
									return <Option key={ i } value={ v.value }>{ v.label }</Option>;
								} )
							}
						</Select>
					</Col>
				</Row>
			</Form.Item> */}

			<Form.Item label="筛选条件" colon={ false }>
				{
					conditionLines.map( ( v, i ) => {
						return (
							<Row gutter={ [ 8, 8 ] } key={ i }>
								<Col span={ 10 }>
									<Select
										defaultValue={ FILTER_MEASURE_CONDITION[ 0 ].value }
										value={ v.key }
										onChange={ ( value ) => handleSelect( value, i ) }>
										{
											FILTER_MEASURE_CONDITION.map( ( v, i ) => {
												return <Option key={ i } value={ v.value }>{ v.label }</Option>;
											} )
										}
									</Select>
								</Col>
								<Col span={ 10 }>
									<Input type='text' value={ v.value } onChange={ ( event ) => handleInput( event, i ) }
												 onFocus={ () => handleAdd( i ) }></Input>
								</Col>
								{
									i + 1 < conditionLines.length && (
										<Col span={ 4 }>
											<Button
												type='text'
												onClick={ () => deleteLine( i ) }
												icon={ <MinusCircleOutlined style={ { margin: '0 auto', color: '#86bc25' } }/> }></Button>

										</Col>
									)
								}

							</Row>
						);
					} )
				}


			</Form.Item>

		</Form>
	);
};

export default React.memo( FilterFieldMeasure );
